<template>
  <div class="bg-white">
    <div class="text-center solid-bottom margin-left-sm margin-right-sm padding-top-lg">
        <div v-if="ableEdit" class="text-xl padding-sm" style="color: #2f2f2f">姓名: <input class="text-lg" style="color: #999999" v-model="employeeDetailItem.name" /></div>
      <div v-else class="text-xl padding-sm" style="color: #2f2f2f">{{employeeDetailItem.name}}</div>
        <div v-if="ableEdit" class="text-xl padding-bottom-xs" style="color: #2f2f2f">电话: <input class="text-lg" style="color: #999999" v-model="employeeDetailItem.tel"/></div>
        <div v-else class="text-df padding-bottom-xs" style="color: #999999">电话: {{employeeDetailItem.tel}}</div>
      <div class="text-df padding-bottom-xl" style="color: #999999">工号: {{employeeDetailItem.id}}</div>
    </div>
    <div>
      <div class="flex padding-sm padding-top-xl">
        <div class="flex-sub text-xl text-bold" style="color: #333333">
          权限
        </div>
        <div class="flex-sub text-right action">
          <button v-if="employeeDetailItem.auth===0" class="cu-btn bg-red" :disabled="!ableEdit" @tap="showModal=true">取消管理员权限</button>
          <button v-else class="cu-btn bg-green" :disabled="!ableEdit" @tap="showModal=true">授予管理员权限</button>
        </div>
      </div>
      <checkbox-group @change="checkboxChange" class="flex text-center text-lg">
          <div class="flex-sub flex bg-gray margin-xl padding-xs margin-top margin-left">
              <checkbox type="checkbox" class="flex-sub round" style="transform:scale(0.7)" :value="checkedData[0]" :disabled="!ableEdit" :checked="employeeDetailItem.auth===0||employeeDetailItem.auth===1||employeeDetailItem.auth===2"/>
              <text class="flex-treble text-left padding-top-xs"  style="color: #4b4b4b">仓管</text>
          </div>
          <div class="flex-sub flex bg-gray margin-xl padding-xs margin-top margin-left">
              <checkbox type="checkbox" class="flex-sub round" style="transform:scale(0.7)" :value="checkedData[1]" :disabled="!ableEdit" :checked="employeeDetailItem.auth===0||employeeDetailItem.auth===1||employeeDetailItem.auth===3"/>
              <text class="flex-treble text-left padding-top-xs"  style="color: #4b4b4b">收银</text>
          </div>
      </checkbox-group>
    </div>

  </div>
    <div class="padding flex flex-direction">
        <button v-if="!ableEdit" class="cu-btn bg-green lg" @tap="ableEditClick">编辑</button>
        <button v-if="ableEdit" class="cu-btn bg-green lg margin-bottom" @tap="commit">确定</button>
        <button v-if="ableEdit" class="cu-btn line-orange lg text-red" @tap="delEmployee">移除该员工</button>
    </div>
    <div :class="'cu-modal bottom-modal '+ (showModal?'show':'')">
        <div class="cu-dialog">
            <div class="cu-bar bg-white">
                <div class="action text-red text-xl" @tap="onAdminClick">确定</div>
                <div class="action text-lg" @tap="showModal=false">取消</div>
            </div>
            <div class="padding-xl text-orange text-lg">
                {{modalMessage}}
            </div>
        </div>
    </div>
    <div :class="'cu-modal bottom-modal '+ (showEditModal?'show':'')">
        <div class="cu-dialog">
            <div class="cu-bar bg-white">
                <div class="action text-red text-xl" @tap="onEditClick">确定</div>
                <div class="action text-lg" @tap="showEditModal=false">取消</div>
            </div>
            <div class="padding-xl text-orange text-lg">
                {{modalEditMessage}}
            </div>
        </div>
    </div>
</template>

<script>
import request from "../../utils/request";

export default {
  name: "EmployeeDetail",
  data(){
    return{
      employeeDetail:{},
        employeeDetailItem:{},
        checkedData:[2,3],
        showModal:false,
        showEditModal:false,
        modalMessage:"",
        modalEditMessage:"",
        ableEdit:false
    }
  },
  onLoad(){
    uni.setNavigationBarTitle({
      title: '员工管理'
    });
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.once('employee', (data)=> {
      this.employeeDetail=data
        this.employeeDetailItem=JSON.parse(JSON.stringify(this.employeeDetail))
        if (this.employeeDetailItem.auth!==0)
            this.modalMessage="确定授予管理员权限吗"
        else
            this.modalMessage="确定取消管理员权限吗"
    })

  },
    methods:{
        checkboxChange(e){
            if (e.detail.value.length===2)
                this.employeeDetailItem.auth=1
            else
                this.employeeDetailItem.auth=parseInt(e.detail.value[0])
        },
        onAdminClick(){
            if (this.employeeDetailItem.auth!==0){
                this.employeeDetailItem.auth=0
                this.modalMessage="确定取消管理员权限吗"
            } else{
                this.employeeDetailItem.auth=1
                this.modalMessage="确定授予管理员权限吗"
            }
            this.showModal=false
        },
        ableEditClick(){
            this.ableEdit=true
        },
        commit(){
            if (isNaN(this.employeeDetailItem.auth)){
                uni.showToast({
                    title: '至少有一条权限',
                    icon: 'error',
                    duration: 1500
                })
                return
            }
            if(this.employeeDetailItem.name===""){
              uni.showToast({
                title: '姓名不能为空',
                icon: 'error',
                duration: 1500
              })
              return
            }
          if(this.employeeDetailItem.tel===""){
            uni.showToast({
              title: '电话不能为空',
              icon: 'error',
              duration: 1500
            })
            return
          }
            this.modalEditMessage="确定提交修改吗"
            this.showEditModal=true

        },
        delEmployee(){
            this.modalEditMessage="确定移除该员工吗"
            this.showEditModal=true

        },
        onEditClick(){
          let pages = getCurrentPages() // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
          let prevPage = pages[pages.length - 2] //上一页页面实例
            if (this.modalEditMessage==="确定提交修改吗"){
                console.log(this.employeeDetailItem)
                request.post("/store/update/employee",this.employeeDetailItem).then(res=>{
                    this.showEditModal=false
                    this.ableEdit=false
                  uni.$emit("employeeUpdate",true)
                })
            } else {
                request.post("/store/del/employee",this.employeeDetailItem).then(res=>{
                    this.showEditModal=false
                  uni.navigateBack({
                    delta:1,
                    success:() => {
                      prevPage.$vm.otherFun("update") // 给上一页绑定方法otherFun,传参地址id
                    }
                  })
                })
            }

        }
    }
}
</script>

<style scoped>

</style>